<template>
  <div class="all">
    <header class="header">
      <div class="header_left">全部相册</div>
    </header>
    <div class="image_main">
      <div class="demo-image__preview" v-for="item in imageList" :key="item.id">
        <el-image
          style="width: 170px; height: 170px"
          :src="item.url"
          :preview-src-list="item.srcList"
        >
        </el-image>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageList: [
        {
          id: 0,
          url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
          srcList: [
            "https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
            "https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg",
          ],
        },
        {
          id: 1,
          url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
          srcList: [
            "https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
            "https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg",
          ],
        },
        {
          id: 2,
          url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
          srcList: [
            "https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
            "https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg",
          ],
        },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
.all {
  width: 100%;
  height: 100%;
  display: flex;
  padding: 0 40px;
  padding-top: 24px;
  flex-direction: column;
  position: relative;
  .header {
    display: flex;
    margin-bottom: 20px;
    align-items: center;
  }
  .header_left {
    font-size: 18px;
    font-weight: 600;
    color: rgb(37, 38, 43);
  }
  .image_main {
    width: 100%;
    height: 100%;
    display: flex;
  }
}
</style>
